{% load static %}
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>music</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="{% static 'bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'owl.carousel.min.css' %}">
    <link rel="stylesheet" href="{% static 'style.css' %}">
</head>

<body class="" data-lang="ltr">
<div class="music_app">
    <div class="ma_container active" id="page" data-page="discover">
        <!-- Start Sidebar  -->
        <div class="ma_sidebar active" id="sidebar">
            <div class="sidebar">
                <div class="logo_container">
                    <img src="https://pic4.zhimg.com/80/v2-c82ce0fe56db90611802e3cda4f4b19b_720w.webp" alt=""
                         width="200" height="100">
                </div>
                <div class="sidebar_innr" data-simplebar>
                    <ul class="sections">
                        <h3>浏览音乐</h3>
                        <li>
                            <a href="/music/recommender/">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <path fill="currentColor"
                                          d="M21,3V15.5A3.5,3.5 0 0,1 17.5,19A3.5,3.5 0 0,1 14,15.5A3.5,3.5 0 0,1 17.5,12C18.04,12 18.55,12.12 19,12.34V6.47L9,8.6V17.5A3.5,3.5 0 0,1 5.5,21A3.5,3.5 0 0,1 2,17.5A3.5,3.5 0 0,1 5.5,14C6.04,14 6.55,14.12 7,14.34V6L21,3Z"></path>
                                </svg>
                                发现音乐
                            </a>
                        </li>
                        <li class="">
                            <a href="/music/genre/">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <path fill="currentColor"
                                          d="M12,18.54L19.37,12.8L21,14.07L12,21.07L3,14.07L4.62,12.81L12,18.54M12,16L3,9L12,2L21,9L12,16M12,4.53L6.26,9L12,13.47L17.74,9L12,4.53Z"></path>
                                </svg>
                                音乐类型
                            </a>
                        </li>
                        <li class="">
                            <a href="/music/music_list/">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <path fill="currentColor"
                                          d="M19,9H2V11H19V9M19,5H2V7H19V5M2,15H15V13H2V15M17,13V19L22,16L17,13Z"></path>
                                </svg>
                                随便听听
                            </a>
                        </li>
                    </ul>
                    <ul class="sections">
                        <h3>控制台</h3>
                        <li style="position: relative;">
                            <a href="/music/music_list/?is_collection=1">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <path fill="currentColor"
                                          d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"></path>
                                </svg>
                                收藏音乐
                            </a>
                        </li>
                    </ul>
                    <ul class="sections">
                        <h3>吉他谱</h3>
                        <li>
                            <a href="/guitar/upload_guitar_tab/">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <path fill="#f4f5f6"
                                          d="M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"/>
                                </svg>
                                上传曲谱
                            </a>
                        </li>
                        <li class="">
                            <a href="/guitar/guitar_tabs/">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <path fill="currentColor"
                                          d="M19,9H2V11H19V9M19,5H2V7H19V5M2,15H15V13H2V15M17,13V19L22,16L17,13Z"></path>
                                </svg>
                                曲谱列表
                            </a>
                        </li>
                    </ul>
                    <ul class="sections">
                        <h3>游戏玩法</h3>
                        <li>
                            <a href="/card/card_counter/">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <path fill="currentColor"
                                          d="M12,18.54L19.37,12.8L21,14.07L12,21.07L3,14.07L4.62,12.81L12,18.54M12,16L3,9L12,2L21,9L12,16M12,4.53L6.26,9L12,13.47L17.74,9L12,4.53Z"></path>
                                </svg>
                                麻子记牌器
                            </a>
                        </li>
                        <li>
                            <a href="/card/voice_processing/">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <path fill="#f4f5f6"
                                          d="M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"/>
                                </svg>
                                上传录音模板
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 退出登录按钮 -->
                <div class="logout" style="position: absolute; bottom: 20px; right: 10px; cursor: pointer;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                         class="feather feather-log-out" onclick="logout()">
                        <path d="M15 3H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V6l5 5-5 5V9a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V9l5 5-5 5z"></path>
                    </svg>
                </div>
            </div>
        </div>
        <div class="overlay" id="overlay"></div>
        <div id="main-header">
            <header>
                <div class="head_menu" id="open_slide">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                        <path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"/>
                    </svg>
                </div>
                <div class="head_search">
                    <form id="searchForm" onSubmit="submitSearchForm(event)">
                        <div class="head_search_cont">
                            <input name="music_name" id="music_name" type="text" class="form-control"
                                   placeholder="搜索......" autocomplete="off"/>
                            <div class="head_search_mobi_close" id="close_search">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                    <path fill="currentColor"
                                          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
                                </svg>
                            </div>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                <path fill="currentColor"
                                      d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/>
                            </svg>
                            <div class="search_dropdown hidden">
                                <div data-simplebar>
                                    <div class="trend_head">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                             viewBox="0 0 24 24">
                                            <path fill="#2196f3"
                                                  d="M16,6L18.29,8.29L13.41,13.17L9.41,9.17L2,16.59L3.41,18L9.41,12L13.41,16L19.71,9.71L22,12V6H16Z"/>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

            </header>


        </div>
        <div id="bar_loading"></div>

        <!-- Content  -->
        <div id="container_content">
            <div class="ma_page_content">
                <div class="ma_pc_inner">
                    <div class="page_padding">
                        {% block content %}{% endblock %}
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

</body>
<style>
    body {
        background-color: #121212; /* 暗夜模式背景色 */
        color: #e1e1e1; /* 亮色文本 */
        font-family: Arial, sans-serif;
    }

    .ma_sidebar {
        position: fixed; /* 固定定位 */
        top: 0;
        left: -250px; /* 初始隐藏在左侧 */
        width: 250px;
        height: 100%;
        background-color: #1a1a1a; /* 侧边栏背景色 */
        padding-top: 40px;
        padding-right: 5px;
        padding-left: 5px;
        border-right: 1px solid #333;
        transition: left 0.3s ease; /* 平滑过渡 */
    }

    /* 当侧边栏处于活动状态时 */
    .ma_sidebar.active {
        left: 0; /* 显示侧边栏 */
    }

    .sections h3 {
        color: #f1f1f1;
        font-size: 16px;
        margin-bottom: 10px;
    }

    .sections a {
        color: #e1e1e1;
        display: flex;
        align-items: center;
        padding: 10px;
        transition: background-color 0.3s ease;
    }

    .sections a:hover {
        background-color: #333; /* 悬停效果 */
    }

    .head_menu svg {
        fill: #f1f1f1;
        cursor: pointer;
        margin: 5px;
    }

    .head_search_cont {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #333;
        padding: 5px;
        border-radius: 5px;
    }

    .head_search input {
        background-color: #121212;
        border: none;
        color: #e1e1e1;
        width: 90%;
        padding: 5px;
    }

    .search_dropdown {
        background-color: #1a1a1a;
        padding: 10px;
    }

    @media (max-width: 768px) {
        .ma_sidebar {
            width: 200px; /* 更小的宽度适应移动设备 */
            left: -200px;
        }

        .ma_container.active #container_content,
        .ma_container.active #main-header {
            margin-left: 200px;
        }
    }
</style>

<script>
    function logout() {
        // 清除名为 'sessionid' 的 Cookie
        document.cookie = "sessionid=; expires=" + new Date(0).toUTCString() + "; path=/";

        // 跳转到登录页面
        window.location.href = "/accounts/index/";
    }

    const openSlideBtn = document.getElementById('open_slide');
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('overlay');
    const maContainer = document.querySelector('.ma_container');

    // 绑定点击事件到汉堡菜单
    openSlideBtn.addEventListener('click', () => {
        sidebar.classList.toggle('active');
        overlay.classList.toggle('active');
        maContainer.classList.toggle('active');
    });

    overlay.addEventListener('click', () => {
        sidebar.classList.remove('active');
        overlay.classList.remove('active');
        maContainer.classList.remove('active');
    });

    // 绑定点击事件到覆盖层以关闭侧边栏
    overlay.addEventListener('click', () => {
        sidebar.classList.remove('active');
        overlay.classList.remove('active');
        maContainer.classList.remove('active');
    });

</script>
</html>